<template>
    <div class="app-container">
        <el-table v-loading="loading" :data="bookList" >
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="序号" align="center" prop="id" width="100" />
         <el-table-column
            label="书籍名称"
            align="center"
            prop="bookName"
            :show-overflow-tooltip="true"
         />
         <el-table-column label="书籍类型" align="center" prop="bookType" width="100"></el-table-column>

         
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:edit']">修改</el-button>
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']" >删除</el-button>
            </template>
         </el-table-column>
      </el-table>


    </div>
</template>

<script setup>
import { listBook, getBook, addBook, updateBook, delBook } from "@/api/zym/book";
import SvgIcon from "@/components/SvgIcon";
import IconSelect from "@/components/IconSelect";
import { toRefs } from "vue";

const bookList = ref([]);
const total = ref(0);
const loading = ref(true);


const data = reactive({
    form:{},
    queryParams:{
        pageNum:1,
        pageSize:10,
        bookName: undefined,
    }
})

const { queryParams , form } = toRefs(data);

function getList() {
  listBook(queryParams.value).then(response => {
    // console.log(response.rows);
    bookList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
/** 表单重置 */
function reset() {
  form.value = {
    id: undefined,
    bookName: undefined,
    bookType: undefined,
    status: "0"
  };
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
getList();
</script>